iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

30天的asp.net core實習生活-從入門到進階技巧系列 第 13

D-19 網頁站台 ? webapp ? mvc ? webapi

  • 分享至 

  • xImage
  •  

網頁站台初體驗

在昨日最後大頭跟小光說c#的介紹告一段落了,所以今天開始會進入網頁站台相關知識的介紹,所以今天小光會學習到甚麼東西呢。

本文同步放置於此

網頁站台

「前輩,快來開發網頁程式吧。」
在休息一天之後,小光一大早到公司就神采奕奕地請大頭告訴他如何開發網頁程式。不過相對於小光的神采奕奕大頭今天顯得有氣無力地躲在需求文件後面埋頭苦幹,直到過了五分鐘後才抬頭並且這樣回答。
「等等等...你需要等我好一陣子,我需要先把這東西完成。」
「你先回到位子坐,讓我來告訴你吧。」
聽到這句話,小光抬頭一看原來是老K前輩,小光有聽大頭說過他是之前帶大頭的前輩。
「前輩謝謝你了,我先繼續趕專案。」
大頭一見到有救兵來救火,趕緊說聲謝謝後又埋頭回到需求文件之中了。
「來吧,我們先來看看如何產生一個網頁專案吧。」
接下來老K這麼對小光說。

產生網頁專案 webapp

不曉得大家還記不記得之前所學的東西其中有一招叫做dotnet new,所以今天我們就使用dotnet new來產生一個網頁專案,所以依舊是先產生一個目錄,並且執行dotnet new的指令,詳細內容請見以下說明。

mkdir webapp
cd webapp
dotnet new webapp

相信有看我們之前文章的讀者們應該不陌生dotnet new這指令,只不過我們當時是使用dotnet new consloe來產生命令列專案,現在我們產生的是有包含razor的web page專案。
所以接下來只要執行dotnet run之後我們第一個網頁程式就完成了。

網頁專案類型

剛剛產生的是dotnetcore內建的網頁程式的範本之一razor pages,除了webapp之外常用的還有mvcwebapi,當然有興趣的也可以用angularreactredux這種spa專案,不過這次先介紹mvc與webapi專案

mvc

MVC相信讀者們應該都不陌生,主要是把網頁程式分成ControlerView並且之間用Model串接起來,至於View的部分後續會介紹怎麼用razor來渲染畫面。

webapi

相較於mvc來說webapi就單純許多,因應前後端分離,所以少了view的部分只需要專心在controler上的開發,不過正因為如此對於無狀態的網頁程式來說webapi的處理更需要注意。

網頁程式檔案結構

剛剛介紹完類型之後我們現在來看看究竟cli幫我們產生了甚麼檔案,相信MVC一開起來應該會是看到以下的目錄結構。

.
├──Controllers
├──Models
├──Views
├──wwwroot
├─Program.cs
└─Startup.cs

其中就如同目錄名稱將Model、View、Controller放置於相對應的位置,至於Program.cs就是程式的進入點,還有以後的讀取設定擋也寫在這邊。另外一個Startup.cs可以參考startup的說明,其中很多關於網頁程式會相依到的元件或是設定檔則是在這個檔案內做注入的動作。

後記

「前輩,沒想到這樣我就可以做一個網頁程式了」
聽完老K的介紹讓小光一下就建立了自己的網頁程式,這讓小光非常興奮。
「不過這只是產生而已喔,你還要學著維護他喔,因此你需要了解一下相關的知識才行,所以接下來幾天我會再詳細的告訴你網頁程式的相關知識。」


上一篇
D-20 非同步 ? async ? await
下一篇
D-18 生命週期 ? request pipeline ? di lifecycle
系列文
30天的asp.net core實習生活-從入門到進階技巧31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言